<template>
  <div class="svg-img">
    <img :src="svgPath" alt="" />
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  interface Props {
    name: string
  }
  const props = withDefaults(defineProps<Props>(), {
    name: ''
  })

  const svgPath = computed(() => new URL(`../../assets/svgIcons/${props.name}.svg`, import.meta.url).href)
</script>

<style lang="less" scoped>
  .svg-img {
    position: relative;
    fill: currentColor;
    vertical-align: -2px;
    outline: none;
  }
</style>
